<script setup>
  import { ref, onMounted } from 'vue'
  import { getPickUpListApi } from '@/apis/task.js'
  // 1. 获取在途的数据列表
  const deliveryList = ref([])
  const isEmpty = ref(false)
  const getList = async () => {
    const { code, data } = await getPickUpListApi(2)
    if (code !== 200) return uni.utils.toast('在途任务获取失败！')
    // 渲染数据
    deliveryList.value = data.items || []
    isEmpty.value = deliveryList.value.length === 0
  }

  onMounted(() => {
    getList()
  })
</script>
<template>
  <scroll-view scroll-y refresher-enabled class="scroll-view">
    <view class="scroll-view-wrapper">
      <view class="task-card" v-for="item in deliveryList" :key="item.id">
        <!-- 跳转到详情 -->
        <navigator
          hover-class="none"
          :url="`/subpkg_task/detail/index?id=${item.id}`"
        >
          <view class="header">
            <text class="no">任务编号: {{ item.transportTaskId }}</text>
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line">{{ item.startAddress }}</view>
              <view class="line">{{ item.endAddress }}</view>
            </view>
          </view>
        </navigator>
        <view class="footer">
          <view class="label">提货时间</view>
          <view class="time">{{ item.planArrivalTime }}</view>
          <!--
          任务的状态 `status` 值可能 `1`、`2`、`4`、`6`，分别对应待提货、在途、已交付、已完成
          在途: 交付 (id)
          已交付: 回车登记 (transportTaskId)
          -->
          <navigator
            hover-class="none"
            :url="`/subpkg_task/delivery/index?id=${item.id}`"
            class="action"
            v-if="item.status === 2"
          >
            交付
          </navigator>
          <navigator
            hover-class="none"
            :url="`/subpkg_task/record/index?transportTaskId=${item.transportTaskId}&actualDepartureTime=${item.actualDepartureTime}`"
            class="action"
            v-if="item.status === 4"
          >
            回车登记
          </navigator>
        </view>
      </view>
      <view v-if="isEmpty" class="task-blank">无在途货物</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
